<extend name='Public/demo' />
<block name='contents'>

    <div class="modal fade" id="albumsModel" tabindex="-1" role="dialog" aria-labelledby="albumsModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="albumsModelLabel">添加相册</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">相册名:</label>
                            <input type="text" class="form-control" id="albums-name" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">相册类型:</label>
                            <select class="form-control" id="albums-type">
                                <option value="2">仅自己可见</option>
                                <option value="3">好友可见</option>
                                <option value="4" selected>所有人可见</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="albums-add">添加</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="albumsAlterModel" tabindex="-1" role="dialog" aria-labelledby="albumsAlterModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="albumsAlterModelLabel">修改相册</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">相册名:</label>
                            <input type="text" class="form-control" id="albums-alterName" maxlength="10">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">相册类型:</label>
                            <select class="form-control" id="albums-alterType">
                                <option value="2">仅自己可见</option>
                                <option value="3">好友可见</option>
                                <option value="4">所有人可见</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="albums-alter">修改</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            //添加相册
            $('#albums-add').click(function() {
                var name = $('#albums-name').val();
                var type = $('#albums-type').val();
                $.get("{:U('Home/Image/albumsadddo')}", {
                    name: name,
                    type: type
                }, function(data) {
                    if (data.status == 1) {
                        //准备数据
                        var id = data.id;
                        var typeName = $('#albums-type').find("option:selected").text();
                        var dt = new Date();
                        var createTime = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes();

                        //克隆对象
                        var newAlbums = $('table tbody tr:eq(0)').clone(true);
                        newAlbums.find('.albums-name').html(name);
                        newAlbums.find('.albums-name').attr('href', "{:U('Home/Image/image')}" + '?id=' + id);
                        newAlbums.find('.albums-time').html(createTime);
                        newAlbums.find('.albums-type').attr('albums-type', type);
                        newAlbums.find('.albums-type').html(typeName);
                        newAlbums.find('.btn-del').removeClass('disabled');
                        newAlbums.find('.btn-alter').removeClass('disabled');
                        newAlbums.find('.btn-alter').attr('albums-id', id);
                        newAlbums.find('.btn-del').attr('albums-id', id);
                        $('table tbody').append(newAlbums);
                        $('#albumsModel').modal('hide');
                    } else {
                        alert(data.info);
                    }
                }, 'JSON');
            })

            var albumsCurId; //当前按钮所属相册id
            var albumsCurTr;
            //修改按钮按下
            $('.btn-alter').click(function() {
                // alert($(this).attr('albums-id'));
                albumsCurId = $(this).attr('albums-id');
                albumsCurTr = $(this).parents('tr');
                $('#albums-alterName').val(albumsCurTr.find('.albums-name').html());
                $('#albums-alterType').val(albumsCurTr.find('.albums-type').attr('albums-type'));
            });
            //删除按钮按下
            $('.btn-del').click(function() {
                if(confirm('真的要删除该相册吗?这将会删除您相册内的所有照片!')){
                    albumsCurTr = $(this).parents('tr');
                    var id=$(this).attr('albums-id');
                    $.get("{:U('Home/Image/albumsdeldo')}",{id:id},function(data){
                        if(data.status==1){
                            albumsCurTr.fadeOut();
                        }
                    },'JSON')
                }
            });

            //修改相册
            $('#albums-alter').click(function() {
                var id = albumsCurId;
                var name = $('#albums-alterName').val();
                var type = $('#albums-alterType').val();
                $.get("{:U('Home/Image/albumseditdo')}", {
                    id: id,
                    name: name,
                    type: type
                }, function(data) {
                    if (data.status == 1) {
                        var typeName = $('#albums-alterType').find("option:selected").text();
                        albumsCurTr.find('.albums-name').html(name);
                        albumsCurTr.find('.albums-type').html(typeName);
                        $('#albumsAlterModel').modal('hide');
                    } else {
                        alert(data.info);
                    }
                }, 'JSON');
            })
        });
    </script>

    <div class="row">
        <aside class="profile-nav col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    相册列表
                </header>
                <table class="table table-striped table-advance table-hover">
                    <thead>
                        <tr>
                            <th><i class="icon-bullhorn"></i> 相册名称</th>
                            <th class="albums-time"><i class="icon-question-sign"></i> 相册创建时间</th>
                            <th><i class="icon-bookmark"></i> 相片数量</th>
                            <th><i class=" icon-edit"></i> 类型</th>
                            <th>
                                <button type="button" id="btnAddAlbums" class="btn btn-primary" data-toggle="modal" data-target="#albumsModel">添加相册</button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <foreach name="albumsList" item="value">
                            <tr>
                                <td><a class="albums-name" href="{:U('Home/Image/image',array('id'=>$value['albums_id']))}">{$value.albums_name}</a></td>
                                <td class="albums-time">{$value.time|date="Y-n-j G:j",###}</td>
                                <td><span class="badge bg-primary">0</span></td>
                                <td>
                                    <span class="albums-type badge bg-info" albums-type="{$value.albums_type}">
                                        <switch name="value.albums_type">
                                            <case value="0">贴图相册</case>
                                            <case value="1">共享相册</case>
                                            <case value="2">仅自己可见</case>
                                            <case value="3">好友可见</case>
                                            <case value="4">所有人可见</case>
                                        </switch>
                                    </span>
                                </td>
                                <td>
                                    <button class="btn btn-success btn-xs"><i class="icon-ok"></i></button>
                                    <button class="btn-alter btn btn-primary btn-xs <if condition=" $value.albums_type eq 0 or $value.albums_type eq 1 ">disabled</if>" albums-id="{$value.albums_id}" data-toggle="modal" data-target="#albumsAlterModel"><i class="icon-pencil"></i></button>
                                    <button class="btn-del btn btn-danger btn-xs <if condition=" $value.albums_type eq 0 or $value.albums_type eq 1 ">disabled</if>" albums-id="{$value.albums_id}"><i class="icon-trash "></i></button>
                                </td>
                            </tr>
                        </foreach>
                    </tbody>
                </table>
            </section>
        </aside>
    </div>
</block>
